import React, { useState } from 'react';
import { Typography } from 'antd';
import { withRouter } from 'umi';
import { WingBlank } from 'antd-mobile';
import Logo from '../components/Logo';
import { ResetForm, SendMailResult, SetNewPassword, TimeoutResult, SuccessResult } from './components';
import styles from './index.less';

const { Title } = Typography;

// 重置密码
const ResetPasswordMobile = ({ location }) => {
    const { step = 1, name, email, verificationKey, verificationValue, id: redirectId } = location?.query;
    const [isLinkTimeout, setIsLinkTimeout] = useState();
    const stepMaps = {
        1: { title: '重置密码', component: <ResetForm name={name} email={email} redirectId={redirectId} /> },
        2: { title: '前往邮箱验证', component: <SendMailResult name={name} email={email} redirectId={redirectId} /> },
        3: {
            title: '设置新密码',
            component: (
                <SetNewPassword
                    verificationKey={verificationKey}
                    verificationValue={verificationValue}
                    setIsLinkTimeout={setIsLinkTimeout}
                    name={name}
                    email={email}
                    redirectId={redirectId}
                />
            )
        },
        4: {
            title: '完成设置',
            component: <SuccessResult redirectId={redirectId} />
        }
    };
    const { title, component } = stepMaps[step] || {};
    return (
        <div className={styles.interviewMobile}>
            <div style={{ background: '#fff', marginBottom: 8, paddingBottom: 24 }}>
                <Logo />
                {isLinkTimeout ? (
                    <TimeoutResult />
                ) : (
                    <>
                        <WingBlank size="lg">
                            {step !== '4' && (
                                <Title level={3} className={styles.title}>
                                    {title}
                                </Title>
                            )}

                            {component}
                        </WingBlank>
                    </>
                )}
            </div>
        </div>
    );
};

export default withRouter(ResetPasswordMobile);
